<!--
 * @Author: your name
 * @Date: 2020-12-28 14:33:04
 * @LastEditTime: 2020-12-28 14:33:04
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /vue-next/Users/duodian/Documents/qugame/work-admin/src/views/setting/users.vue
-->
<template>
  <div class="users-group">
    <div class="input-box">
      <el-input
          placeholder="请输入您要搜索的用户组"
          clearable
          @keyup.enter.native="getList(1)"
          style="width:240px;"
          v-model.trim="keyword">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
      <el-button type="success" @click="addUsersGroup">创建用户组</el-button>
  </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            width="120"
            label="用户组名称">
            <template slot-scope="scope">
                <div class="item-td">{{scope.row.roleName}}</div>
            </template>
        </el-table-column>
        <el-table-column
            label="用户">
            <template slot-scope="scope">
              <div v-if="scope.row.userList && scope.row.userList.length">
                <div class="item-td" v-for="(item, index) in scope.row.userList" :key="index">{{item}}</div>
              </div>
              <div v-else>-</div>
            </template>
        </el-table-column>

        <el-table-column
            label="创建时间">
            <template slot-scope="scope">
                <div class="item-td">{{ _formatDate(scope.row.ctime) }}</div>
            </template>
        </el-table-column>

        <el-table-column
            width="100"
            fixed="right"
            label="操作">
            <template slot-scope="scope">
                <div class="item-td">
                    <div><el-button @click="addUsersGroup(scope.row)" type="text" size="small">编辑用户组</el-button></div>
                    <div><el-button style="color: red" @click="removeUsersGroup(scope.row)" type="text" size="small">删除用户组</el-button></div>
                </div>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog
        title="创建用户组"
        :visible.sync="visible"
        width="730px">
        <div class="visible-dialog">
          <div class="vis-list">
            <span>用户组名称：</span>
            <el-input
              placeholder="请填写用户组名称"
              style="width:240px;"
              v-model.trim="usersGroupName"
            ></el-input>
          </div>
          <div class="vis-list">
            <span>菜单：</span>
            <div class="menu-wrap">
              <div v-for="menu in menusData" :label="menu.name" :key="menu.id">
                <div class="one">
                  <el-checkbox-group v-model="choosePres">
                    <el-checkbox :label="menu.permissions">{{ menu.name }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="two" style="margin: 10px 26px;" v-if="menu.childrens">
                  <div>
                    <el-checkbox-group v-model="choosePres" @change="handleChange">
                      <div v-for="child in menu.childrens" :key="child.id">
                        <div>
                          <el-checkbox :label="child.permissions" >{{ child.name }}</el-checkbox>
                        </div>
                        <div class="three" style="margin: 10px 26px;" v-if="child.childrens">
                          <el-checkbox-group v-model="choosePres" @change="handleChange">
                            <div v-for="c in child.childrens" :key="c.id">
                              <el-checkbox :label="c.permissions" :key="c.id">{{ c.name }}</el-checkbox>
                            </div>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>

                
              </div>
            </div>
            <!-- <el-checkbox-group 
              v-model="choosePres"
              @change="handleChange"
              >
              <el-checkbox v-for="pre in restaurants" :label="pre.key" :key="pre.key">{{pre.name}} ({{pre.key}})</el-checkbox>
            </el-checkbox-group> -->
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
              <div class="all-btn-box">
                  <el-button @click="visible = false">取 消</el-button>
                  <el-button type="primary" @click="addPres">确 定</el-button>
              </div>
          </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'


export default {
    data () {
        return {
          keyword: '',
          tableData: [],
          pageNum: 1,
          pageSize: this._pageSize,
          total: 0,
          loading: false,
          statusValue: {
            '0': '审核中',
            '1': '正常使用',
            '2': '审核不通过',
            '3': '账号停用'
          },
          visible: false,
          userItem: null,
          usersGroupName: '',
          restaurants: [],
          choosePres: [],
          roleId: null,
          menusData: []
        }
    },
    watch: {
    },
    created () {
      this.getList(1)
      this.querySearchAsync()
      this.getOperateMenus()
    },
    methods: {
      // 获取外部菜单
      async getOutSideMenuList () {
          let res = await this.$http.post('/account/menus')
          if (res.code === '0') {
              this.$store.commit('changeSideBar', res.data);
              return
          }
          this.$message({
              type: 'error',
              message: '系统异常，请稍后再试'
          })
      },
      handleChange(item) {
        this.choosePres = item
        // 选择下一级的菜单则选中 一级菜单
        item.forEach((i) => {
          this.menusData.forEach((menu) => {
            if (menu.childrens) {
              menu.childrens.forEach((child) => {
                if (child.permissions === i && !item.includes(menu.permissions)) {
                  this.choosePres.push(menu.permissions)
                }
              })
            }
          })
        })
        
      },
      // 添加新用户组并添加权限
      addUsersGroup (item) {
        this.visible = true
        this.choosePres = []
        this.usersGroupName = ''
        this.roleId = null
        // 如果是编辑的话
        if (item && item.roleId) {
          this.choosePres = item.privilegeListVoList
          this.usersGroupName = item.roleName
          this.roleId = item.roleId
        }
      },
      // 添加新用户组并添加权限
      async addPres () {
        if (!this.usersGroupName) return this.$message({ type: 'error',  message: '请填写用户组名称'})

        let params = {
          permissions: this.choosePres,
          roleName: this.usersGroupName
        }
        if (this.roleId) {
          params.roleId = this.roleId
        }
        let res = await this.$http.post('/account/createAdminRole', params)
        this.visible = false
        if (res.code === '0') {
          this.$message({
              type: 'success',
              message: '操作成功'
          })
          this.getList(1)
          this.getOutSideMenuList()
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 移出用户组
      removeUsersGroup (item) {
        this.$confirm('确定删除该用户组？', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.removeUsersGroupApi(item)
        }).catch(() => {
        })
      },
      // 移除用户组 api 
      async removeUsersGroupApi (item) {
        let params = {
          roleId: item.roleId,
        }
        let res = await this.$http.post('/account/deleteAdminRole', params)
        if (res.code === '0') {
          this.getList(1)
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 获取权限列表
      async querySearchAsync() {
        let res = await this.$http.post('/account/selectAdminPrivilege', {
        })
        if (res.code === '0') {
          this.restaurants = res.data
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 获取用户列表
      async getList(pageNum) {
        if (this.loading) return
        this.loading = true
        this.pageNum = pageNum
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        if (this.keyword) {
          params.roleName = this.keyword
        }
        let res = await this.$http.post('/account/findAdminRoles', params)
        this.loading = false
        if (res.code === '0') {
          this.tableData = res.data
          this.total = res.count
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 获取全部菜单列表
      async getOperateMenus() {
        let res = await this.$http.post('/account/getOperateMenus', {
        })
        if (res.code === '0') {
          this.menusData = JSON.parse(JSON.stringify(res.data))
          return
        }
        this.$message({
            type: 'error',
            message: '系统异常，请稍后再试'
        })
      },
      // 页容切换
      sizeChange (num) {
          this.pageSize = num
          this.getList(1)
      },

      // 页码切换
      pageChange (num) {
          this.pageNum = num
          this.getList(this.pageNum)
      },

      _formatDate (val) {
        return formatDate(val, 'YYYY-MM-DD')
      }
    }
}
</script>
<style lang="scss" scoped>
  .users-group {
    .vis-list {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
      span{
        margin-right: 10px;
        min-width: 80px;
      }
      .menu-wrap {
        .one {
          /deep/ .el-checkbox__label { 
            color: #409EFF;
          }
        }
      }
    }
    .input-box {
        margin-bottom: 20px;
        .btn {
            margin-left: 10px;
        }
    }
    .table-box {
      margin: 20px 0;
    }
    .tools {
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
  }
</style>
